<template>
    <div class="container">


        <div class="upload">
            <div>
                <input type="file" id="fileUpload" @change="fileChange($event)">
                <label class="status">上传状态: <span>{{statusText}}</span></label>
            </div>
            <div class="upload-type">
                <!--上传方式一, 使用 UploadAuth 上传:-->
                <!--<el-button type="primary" @click="authUpload" :disabled="uploadDisabled">开始上传</el-button>-->
                <el-button @click="pauseUpload" :disabled="pauseDisabled">暂停</el-button>
                <el-button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</el-button>
                <!--<span class="progress">上传进度: <i id="auth-progress">{{authProgress}}</i> %</span>-->


            </div>
            <div class="mt-2" v-if="authProgress">
                <div class="">
                    <div>{{file.name}}</div>
                    <!--<div>上传状态: <span>{{statusText}}</span></div>-->
                </div>
                <el-progress :text-inside="true" :stroke-width="26" :percentage="authProgress"
                             :color="authProgress>=100?'#5cb87a':pauseDisabled?
                       '#ccc' :'#409eff'"></el-progress>
            </div>
        </div>
        <!--<div class="info">uploadAuth及uploadAddress参数请查看<a href="https://help.aliyun.com/document_detail/55407.html" target="_blank">获取上传地址和凭证</a></div>-->
    </div>
</template>
<script>


    export default {
        data() {
            return {
                timeout: '',
                partSize: '',
                parallel: '',
                retryCount: '',
                retryDuration: '',
                region: 'cn-shanghai',
                userId: '1932177008562071',
                file: null,
                authProgress: 0,
                uploadDisabled: true,
                resumeDisabled: true,
                pauseDisabled: true,
                uploader: null,
                statusText: '',
                // fileList: []
            }
        },
        methods: {
            fileChange(e) {
                this.file = e.target.files[0]
                if (!this.file) {
                    alert("请先选择需要上传的文件!")
                    return
                }
                var Title = this.file.name
                var userData = '{"Vod":{}}'
                if (this.uploader) {
                    this.uploader.stopUpload()
                    this.authProgress = 0
                    this.statusText = ""
                }
                this.uploader = this.createUploader()
                console.log(userData)
                this.uploader.addFile(this.file, null, null, null, userData)
                this.uploadDisabled = false
                this.pauseDisabled = true
                this.resumeDisabled = true
                this.authUpload()
            },
            authUpload() {
                // 然后调用 startUpload 方法, 开始上传
                if (this.uploader !== null) {
                    this.uploader.startUpload()
                    this.uploadDisabled = true
                    this.pauseDisabled = false
                }
            },
            // 暂停上传
            pauseUpload() {
                if (this.uploader !== null) {
                    this.uploader.stopUpload()
                    this.resumeDisabled = false
                    this.pauseDisabled = true
                }
            },
            // 恢复上传
            resumeUpload() {
                if (this.uploader !== null) {
                    this.uploader.startUpload()
                    this.resumeDisabled = true
                    this.pauseDisabled = false
                }
            },

            createUploader(type) {
                let self = this
                let uploader = new AliyunUpload.Vod({
                    timeout: self.timeout || 60000,
                    partSize: self.partSize || 4194304,
                    parallel: self.parallel || 2,
                    retryCount: self.retryCount || 3,
                    retryDuration: self.retryDuration || 2,
                    region: self.region,
                    userId: self.userId,
                    // 添加文件成功
                    addFileSuccess: function (uploadInfo) {
                        self.uploadDisabled = false
                        self.resumeDisabled = false
                        self.statusText = '添加文件成功, 等待上传...'
                        console.log("addFileSuccess: " + uploadInfo.file.name)
                    },
                    // 开始上传
                    onUploadstarted: function (uploadInfo) {

                        // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
                        // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
                        // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
                        // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
                        // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
                        // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
                        if (!uploadInfo.videoId) {

                            let createUrl = 'vod/upload/create?title=' + uploadInfo.file.name + '&filename=' + uploadInfo.file.name;
                            axios.get(createUrl).then(data => {
                                console.log(uploadInfo);
                                let uploadAuth = data.data.UploadAuth
                                let uploadAddress = data.data.UploadAddress
                                let videoId = data.data.VideoId
                                // console.log(uploadAuth,uploadAddress,videoId);
                                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)

                            })
                            self.statusText = '文件开始上传...'
                            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                        } else {
                            // 如果videoId有值，根据videoId刷新上传凭证
                            // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
                            let refreshUrl = 'vod/upload/refresh?video_id=' + uploadInfo.videoId
                            axios.get(refreshUrl).then(({data}) => {
                                let uploadAuth = data.UploadAuth
                                let uploadAddress = data.UploadAddress
                                let videoId = data.VideoId
                                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                            })
                        }
                    },
                    // 文件上传成功
                    onUploadSucceed: function (uploadInfo) {
                        console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                        self.statusText = '文件上传成功!'
                        self.$emit('complete',uploadInfo);
                    },
                    // 文件上传失败
                    onUploadFailed: function (uploadInfo, code, message) {
                        console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
                        self.statusText = '文件上传失败!'
                    },
                    // 取消文件上传
                    onUploadCanceled: function (uploadInfo, code, message) {
                        console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
                        self.statusText = '文件已暂停上传'
                    },
                    // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
                    onUploadProgress: function (uploadInfo, totalSize, progress) {
                        console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
                        let progressPercent = Math.ceil(progress * 100)
                        self.authProgress = progressPercent
                        self.statusText = '文件上传中...'
                    },
                    // 上传凭证超时
                    onUploadTokenExpired: function (uploadInfo) {
                        // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
                        // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
                        // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
                        let refreshUrl = 'vod/upload/refresh?video_id=' + uploadInfo.videoId
                        axios.get(refreshUrl).then(({data}) => {
                            let uploadAuth = data.UploadAuth
                            uploader.resumeUploadWithAuth(uploadAuth)
                            console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
                        })
                        self.statusText = '文件超时...'
                    },
                    // 全部文件上传结束
                    onUploadEnd: function (uploadInfo) {
                        console.log("onUploadEnd: uploaded all the files")
                        self.statusText = '文件上传完毕'
                    }
                })
                return uploader
            }
        }
    }
</script>